<template>
  <div
    id="btn"
    :style="{
              backgroundColor:styles.colorBg,
               marginTop:styles.marginTop+'px',
                marginBottom:styles.marginBottom+'px',
                 marginLeft:styles.marginLR+'px',
                  marginRight:styles.marginLR+'px',
                  borderRadius:styles.circle+'px'
            }"
  >
    <el-carousel
      indicator-position="outside"
      :autoplay="false"
      class="notice-up-right"
      :height="styles.line==1?'95px':'190px'"
    >
      <el-carousel-item v-for="(v,i) in group(styles.btnList,styles.line*styles.num)" :key="i">
        <ul class="btn-list">
          <li
            :style="{width:styles.num==3?'33.33%':styles.num==4?'25%':'20%'}"
            v-for="(a,b) in v"
            :key="b"
          >
            <div :style="{
              borderRadius:styles.circleBtn+'px'
            }">
              <el-image v-if="a.img==''" style="width: 100%; height: 100%" :src="img" fit="cover"></el-image>
              <el-image v-else style="width: 100%; height: 100%" :src="a.img" fit="cover"></el-image>
            </div>
            <span :style="{color:styles.colorWord}">{{a.word}}</span>
          </li>
        </ul>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "btn",
  data() {
    return {
      img: require("../../../assets/img/blank.png"),
    };
  },
  props: ["styles"],
  watch: {},
  mounted() {},
  methods: {
    group(list, num) {
      let index = 0;
      let newArray = [];
      while (index < list.length) {
        newArray.push(list.slice(index, (index += num)));
      }

      return newArray;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-carousel__indicators--outside{
  display: none;
}
#btn {
  border-radius: 10px;
  .notice-up-right {
    line-height: 30px;
    overflow: hidden;
    .btn-list {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding: 10px 0 0;
      >li:last-child{
        margin-bottom: 0;
      }
      > li {
        width: 20%;
        text-align: center;
        margin-bottom: 15px;
        > div {
          margin: 0 auto;
          width: 50px;
          height: 50px;
          border-radius: 10px;
          overflow: hidden;
        }
        >span{
          font-size: 10px;
        }
      }
    }
  }
}
</style>
